<template>
	<view>
		<view class="top">
			<view class="navbar" :style="{ height: navBarHeight + 'px' }"
			    ><text style="font-size: 36upx">星城校园圈</text></view
			  >
			  <image
			    src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/%E7%BB%84%201042.png"
			    mode=""
			  ></image>
			<m-swiper :list="banner" :previousMargin="20" :nextMargin="20"></m-swiper>
		</view>
		<view class="selectBtns" >
			<view :class="currentBtn==index?'selectedBtn':'btn'" @click="changeTab(index)" v-for="(item,index) in btns" :key="index">{{item.name}}</view>
		</view>
		<view class='content'>
			 <ListCard :contentList="contentList" />
		</view>
	</view>
</template>

<script>
	import ListCard from '@/components/schoolCard/card.vue'
	import config from "@/config/index.config.js";
	export default {
		components: {
		  ListCard
		},
		created() {
		  //获取手机状态栏高度
		  this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		  //#ifdef MP-WEIXIN
		  this.navBarHeight = uni.getMenuButtonBoundingClientRect().bottom;
		  this.topHeight = this.navBarHeight + uni.upx2px(80);
		  //#endif
		},
		data() {
			return {
				contentList:[
					{
						imgList: [
									'http://p26.toutiaoimg.com/img/tos-cn-i-0022/9b823768adde469996b6efad367b9394~tplv-tt-post:342:224.jpeg?from=post',
									'http://p26.toutiaoimg.com/img/tos-cn-i-0022/030af1dda4404e96889bf2bd7ee44cb0~tplv-tt-post:342:224.jpeg?from=post',
									'http://p26.toutiaoimg.com/img/tos-cn-i-0022/ee96e46ab1c44ed0a7e0f51430b3dca3~tplv-tt-post:342:224.jpeg?from=post',
									'http://p26.toutiaoimg.com/img/tos-cn-i-0022/ee96e46ab1c44ed0a7e0f51430b3dca3~tplv-tt-post:342:224.jpeg?from=post',
									'http://p26.toutiaoimg.com/img/tos-cn-i-0022/23977c52f89742a69636fae4ff64f338~tplv-tt-post:342:224.jpeg?from=post',
									'http://p26.toutiaoimg.com/img/tos-cn-i-0022/04085075c1f64f119f7a036716f413e6~tplv-tt-post:342:224.jpeg?from=post',
									'http://p26.toutiaoimg.com/img/tos-cn-i-0022/5f27fd0e6bcf479aa3a4ef8e819817fb~tplv-tt-post:342:224.jpeg?from=post',
									'http://p26.toutiaoimg.com/img/tos-cn-i-0022/148144db611e44a2ba533a95a6001c54~tplv-tt-post:342:224.jpeg?from=post',
									'http://p26.toutiaoimg.com/img/tos-cn-i-0022/8490dec2d2ff4554a112934de2567f0f~tplv-tt-post:342:224.jpeg?from=post'
								  ],
						address:'湖南省·永州市·永州职业技术学院',
						auther:'zxl',
						contentText:'啦啦啦',
						sex:'女'
					},
					{
						imgList: [
									'http://p26.toutiaoimg.com/img/tos-cn-i-0022/9b823768adde469996b6efad367b9394~tplv-tt-post:342:224.jpeg?from=post',
									'http://p26.toutiaoimg.com/img/tos-cn-i-0022/030af1dda4404e96889bf2bd7ee44cb0~tplv-tt-post:342:224.jpeg?from=post',
									],
						address:'湖南省·长沙市·民政职业技术学院',
						auther:'zxl',
						contentText:'啦啦啦',
						sex:'男'
					}
				],
				banner: [],	
				currentBtn:0,
				navBarHeight: 0,
				btns: [
					{
						name: '推荐',
						id:99
					},
					{
						name: '热门',
						id:0
					},
					{
						name: '同校',
						id:1
					}
				]
			}
		},
		onLoad() {
			this.getBanners()
		},
		methods: {
			getBanners() {
				
			  let param = {
			    current: 1,
			    number: 10,
			  };
			  uni.request({
			  	url: `${config.baseUrl}/starCityAll/jinZhiIndex/banners`,
			  	method: "GET",
			  	data: param,
			  	dataType: "json",
			  	header: {
			  		"content-type": "application/json",
			  		"Blade-Auth":uni.getStorageSync("token")
			  	},
			  	success: (res) => {
					this.banner = res.data.data.banner.banners;
				},
			  })
			},
			changeTab(index) {
				if(this.currentBtn!=index){
					this.currentBtn = index;
				}
			  	
			 } 
		}
	}
</script>

<style lang="scss">
.top {
  top: 0;
  width: 100%;
  image {
    z-index: -1;
    width: 100%;
    position: fixed;
    top: 0;
  }
}
.navbar {
  height: 100upx;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text {
    color: #000;
    font-weight: bolder;
  }
}
.content{
	padding:10rpx 20rpx;
	
}
.selectBtns{
	margin-top:50rpx;
	margin-left:40rpx;
	width: 300rpx;
	display: flex;
	text-align: center;
	.btn{
		margin:0 20rpx;
		flex:1;
		color:#444;
	}
	.selectedBtn{
		margin:0 10rpx;
		flex:1;
		color:#5FDB7E;
		border-bottom:8rpx solid #5FDB7E;
	}
}
</style>
